---
tag: new
---

# PageTabs

import { PageTabs, PageTab } from '@theme';

:::info

The PageTabs component creates sub-tabs within a page, allowing a single page to be split into multiple sub-pages. Each page may contain exactly one PageTabs.

:::

<PageTabs>

<PageTab label="API">

## Basic usage

```mdx title="docs/guide/getting-started.mdx"
# Getting started

import { PageTabs, PageTab } from '@theme';

<PageTabs>
<PageTab label="PageTab 1">

## Foo

</PageTab>

<PageTab label="PageTab 2">

## Bar

</PageTab>
</PageTabs>
```

## Using MDX fragments

It's recommended to use [MDX fragments](../../guide/use-mdx/components.mdx) to split a page into multiple sub-pages.

```mdx title="docs/guide/getting-started.mdx"
# Getting started

import { PageTabs, PageTab } from '@theme';
import Foo from './fragments/_foo.mdx';
import Bar from './fragments/_bar.mdx';

<PageTabs>
  <PageTab label="PageTab 1">
    <Foo />
  </PageTab>
  <PageTab label="PageTab 2">
    <Bar />
  </PageTab>
</PageTabs>
```

</PageTab>

<PageTab label="How it works">

## Dynamic TOC

Based on extensive feedback from V1 users, we found that users often encountered issues with incorrect static TOC extraction when using [MDX fragments](../../guide/use-mdx/components.mdx) that include headers.

Rspress V2 introduces Dynamic TOC, which dynamically generates the TOC at runtime by monitoring DOM changes through [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver). This ensures TOC accuracy and allows users to leverage the full flexibility of [MDX fragments](../../guide/use-mdx/components.mdx). This also makes the `<PageTabs />` component possible.

```ts
import { useDynamicTOC } from '@theme';
```

</PageTab>

</PageTabs>
